/**
 * webpack.config.js  webpack的配置文件
 *    作用: 指示 webpack 干哪些活 (当你运行webpack指令时, 会加载里面的配置)
 *
 *    所有构建工具都是基于nodejs平台运行. 模块化默认采用commonjs
 *
 *    externals
 */
const path = require('path')
// HtmlWebpackPlugin 是一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: "js/built.js",
    // 输出路径
    // __dirname nodejs的变量, 代表当前文件的目录绝对路径
    // 当前文件的目录: webpack.config.js 是当前文件, 所在目录 03.compile_package_....
    path: path.resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader的配置
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
    // html-webpack-plugin
    // 功能: 默认会创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
    // 需求: 需要有结构的HTML文件  --> 构造器传入参数 HtmlWebpackPlugin(option)
    new HtmlWebpackPlugin({
      // 复制 ./src/index.html 文件, 并自动引入打包输出的所有资源(JS/CSS)
      template: "./src/index.html"
    })
  ],
  // 模式
  mode: 'development',
  devtool: 'eval-source-map',
  // 对象属性:    第三方库暴露出来的方法名 / package.json中依赖包名 / npm包名
  // 对象属性值:  值是页面引入`xx`时提供的变量(对象)
  // 举例:  import Vue from 'vue';    // 其中Vue是vue.js模块默认导出的变量
  //        import VueRouter from 'vue-router'  // VueRouter是vue-router模块默认导出变量
  externals: {
    // 拒绝JQuery被打包进来
    // jquery: 'jQuery'    // 等价于 jquery: '$'
    jquery: '$'
  }
}
